<template>
	<view class="shop-info-page" v-if="shopDetail.shopid">
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">商家详情</block>
		</bar-title> 
		
		
		<!--轮播图-->
		<view class="shop-swiper-box" v-if="shopDetail.bannerList.length">
			<swiper
				class="screen-swiper square-dot c"
				autoplay
				indicator-dots
			>
				<swiper-item
					v-for="(simg, index) in shopDetail.bannerList"
					:key="index"
				>
					<image class="swiper-img" :src="simg"
					/>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 商户详情 -->
		<view class="shop-info">
			<view class="info-title">{{shopDetail.shopname}}</view>
			<view class="info-sub">评价{{shopDetail.shoprate}}分 {{shopDetail.momentnum}}条评价</view>
			<view class="info-rate">
				<text class="margin-right-xs">服务:{{shopDetail.service}}分</text>
				<text class="margin-right-xs">卫生:{{shopDetail.hygiene}}分</text>
				<text class="margin-right-xs">环境:{{shopDetail.ambient}}分</text>
				<text class="margin-right-xs">体验:{{shopDetail.experience}}分</text>
			</view>
			<view class="info-address">
				<view class="address-box">
					<view class="icon">
						<image class="location" src="/static/img/ic_personal_add.png" mode="widthFix"></image>
					</view>
					<view class="address">
						{{shopDetail.province}}{{shopDetail.city}}{{shopDetail.district}}{{shopDetail.shopadress}}
					</view>
					<view class="icon"  @tap="calltelephone(shopDetail.shoptelnum)">
						<image class="tel" src="/static/img/icon_phone.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="arrivaltime">
					{{shopDetail.arrivaltime}}
				</view>
			</view>
		</view>
		
		
		<!-- 发布活动 -->
		<view class="bg-white margin-bottom">
			<view class="model-title">
				<view class="title">
					发布活动 <text class="sub">（近一个月）</text>
				</view>
				<!-- <view class="text-grey">
					<text class="cuIcon-right"></text>
				</view> -->
			</view>
			
			<!-- 活动列表 -->
			<view class="activity-list" v-if="shopDetail.game && shopDetail.game.length">
				<block v-for="(game,index) of shopDetail.game" :key="index">
					<ViewScenario :activity="game" ></ViewScenario>
				</block>
			</view>
			<view class="model-empty" v-else>
				暂无发布活动
			</view>
		</view>
		
		
		<!-- 用户点评 -->
		<view class="bg-white margin-bottom">
			<view class="model-title" @click="addCommit">
				<view class="title">
					用户点评 <text class="sub">（{{shopDetail.momentnum}}）</text>
				</view>
				<view class="text-grey">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			
			<view class="comment-list" v-if="shopDetail.comment && shopDetail.comment.length">
				<block v-for="(comment,index) of shopDetail.comment" :key="index">
					<view class="comment-box">
						<view class="comment-avatar">
							<image class="avatar" :src="comment.headurl"></image>
							<view class="info">
								<view class="nickname">{{comment.nickname}}</view>
								<view class="time">{{gdate.formatTime (comment.createtime)}}</view>
							</view>
						</view>
						<view class="comment-text">
							{{comment.commenttext}}
						</view>
					</view>
				</block>
			</view>
			
			<view class="model-empty" v-else>
				暂无用户点评
			</view>
		</view>
		
		<!-- 推荐商家 -->
		<view class="bg-white">
			<view class="model-title">
				<view class="title">
					推荐商家
				</view>
			</view>
			
			<view class="recommendshop-list" v-if="shopDetail.recommendshop && shopDetail.recommendshop.length">
				<block v-for="(recommend,index) of shopDetail.recommendshop" :key="index">
					<view class="recommendshop-box" @click="$jumpPages('shopinfo',{shopid: recommend.shopid})">
						<view class="shopimg">
							<image class="img" :src="recommend.shopimg" mode="aspectFill"></image>
						</view>
						<view class="shopinfo">
							<view class="shopname">{{recommend.shopname}}</view>
							<view class="shoprate">{{recommend.shoprate}}分</view>
							<view class="shopaddress">
								<view class="distance">
									距离{{recommend.distance}}km
								</view>
								<view class="mintax">
									￥{{recommend.mintax}}/人
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			
			<view class="model-empty" v-else>
				暂无推荐商家
			</view>
		</view>
		
		
	</view>
</template>

<script module="gdate" lang="wxs">
	function formatTime (startdate) {
		var Yy = startdate.substring(0,4) + '-'
		var Mm = startdate.substring(4,6) + '-'
		var Dd = startdate.substring(6,8) + ' '
		var Hh = startdate.substring(8, 10) + ':'
		var Ff = startdate.substring(10, 12)
		return Yy + Mm + Dd + Hh + Ff
	}
    module.exports = {
		formatTime: formatTime
    }
</script>
<script>

import ViewScenario from '@/components/box/ViewScenario.vue';
import { Game } from '@/models/game.js';
export default {
	components: {
		ViewScenario
	},
	data() {
		return {
			shopid: '',
			shopDetail: {}
		};
	},
	computed:{
		
	},
	onLoad(option) {
		if(option && option.q) {
			let h5Url = decodeURIComponent(option.q)
			let h5Option = this.getShopByH5(h5Url)
			if(h5Option && h5Option.shopid) {
				this.shopid = h5Option.shopid
				this.getShopDetail()
			}
		}
		if(option && option.shopid) {
			this.shopid = option.shopid
			this.getShopDetail()
		}
		
	},
	onShow() {
		
	},
	methods: {
		addCommit() {
			this.$mTool.showModal({
				title: '提示',
				content: '如需点评，请下载MIOUapp！',
				showCancel: false
			})
		},
		getShopByH5(url) {
			let theRequest = new Object();
			if (url.indexOf("?") != -1) {
			  let str = url.substr(url.indexOf("?")+1);
			  let strs = str.split("&");
			  for(let i = 0; i < strs.length; i ++) {
				 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
			  }
			}
			return theRequest;
		},
			
		//拨打电话
		calltelephone(tel) {
			uni.makePhoneCall({
			    phoneNumber: tel //仅为示例
			});
		},
		async getShopDetail() {
			let shopDetail = await Game.getShopDetail(this.shopid)
			console.log(shopDetail);
			// this._formatData(shopDetail)
			this.shopDetail = shopDetail
			this.publisherLoad = true
		},
		_formatData(publisherDetails) {
			this.inftro = publisherDetails.scencontext
			let scenstyle = publisherDetails.scenstyle
			if (!!scenstyle) {
				this.tags = scenstyle.split(' ')
			}
		},
	},
	onShareAppMessage (options) {
		if (options.from === "menu") {
			return {
				title: '您的好友在MIOU上发现了一家好店',
				path: '/pages/game/shopinfo?shopid=' + this.shopid,
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.shop-swiper-box {
	width: 750rpx;
	margin: 0 auto;
	.screen-swiper {
		height: 420rpx;
		min-height: 420rpx;
		.swiper-img{
			width: 100%;
			height: 100%;
		}
	}
}
.model-title{
	display: flex;
	align-items: center;
	padding: 30rpx 30rpx 20rpx;
	.title{
		border-left: 4rpx solid #000000;
		padding-left: 20rpx;
		line-height: 1;
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
		flex: 1;
		.sub{
			font-weight: lighter;
			font-size: 28rpx;
			color: #666666;
		}
	}
}
.model-empty{
	padding: 10rpx 40rpx 30rpx;
	color: #666666;
}
.shop-info{
	padding: 45rpx 30rpx 15rpx;
	background: #FFFFFF;
	margin-bottom: 30rpx;
	.info-title{
		color: #000000;
		font-weight: 700;
		font-size: 34rpx;
		margin-bottom: 20rpx;
	}
	.info-sub{
		color: #000000;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.info-rate{
		color: #999999;
		font-size: 28rpx;
		margin-bottom: 40rpx;
	}
	.info-address{
		font-size: 30rpx;
		padding-top: 40rpx;
		border-top: 1px solid #F1F1F1;
		.address-box{
			display: flex;
			align-items: center;
			flex: 1;
			margin-bottom: 14rpx;
			line-height: 1.4;
		}
		.address{
			flex: 1;
		}
		.arrivaltime{
			font-size: 28rpx;
			color: #999999;
			margin-left: 50rpx;
		}
		.icon{
			flex-shrink: 0;
		}
		.location{
			width: 30rpx;
			margin-right: 20rpx;
		}
		.tel{
			width: 50rpx;
			margin-left: 20rpx;
		}
	}
}
.activity-list{
	padding: 20rpx 0;
}
.comment-list{
	padding: 0 30rpx;
	.comment-avatar{
		display: flex;
		margin-bottom: 10rpx;
		.avatar{
			width: 60rpx;
			height: 60rpx;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 16rpx;
		}
	}
	.comment-box{
		padding: 24rpx 0;
		
		&~.comment-box{
			border-top: 1px solid #F1F1F1; 
		}
		.nickname{
			color: #000000;
			font-size: 24rpx;
			margin-bottom: 8rpx;
		}
		.time{
			color: #999999;
			font-size: 20rpx;
		}
	}
	.comment-text{
		line-height: 1.3;
		color: #474747;
	}
}
.recommendshop-list{
	padding: 20rpx 30rpx;
	.recommendshop-box{
		display: flex;
		padding-bottom: 20rpx;
	}
	.shopimg{
		width: 240rpx;
		height: 128rpx;
		overflow: hidden;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.shopinfo{
		min-height: 130rpx;
		flex: 1;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #F1F1F1;
	}
	.shopname{
		font-weight: 700;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 8rpx;
	}
	.shoprate{
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 8rpx;
	}
	.shopaddress{
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>